<template>
  <view class="page-body">
    <u-navbar :is-back="false" title="账单添加"
      title-size="30"
      :background="{background:'#2B88FE' }"
      title-color="#fff">
      <div class="head_icon">
        <u-icon @click="$api.handleBackTo"
          name="arrow-left" color="#fff"
          size="36">
        </u-icon>
        <u-icon @click="$api.handleHomeTo"
          name="home" color="#fff" size="36">
        </u-icon>
      </div>
    </u-navbar>
    <view class="clist x-row">
      <view class="x-col-center cname">
        账单金额
      </view>
      <input placeholder="请输入"
        v-model="form.Money " type="digit"
        class="x-col x-col-center "></input>
      <view class="rmb x-col-center">
        元
      </view>
    </view>
    <view class="clist x-row">
      <view class="x-col-center cname">
        账单时间
      </view>
      <input type="text" placeholder="请选择"
        v-model="form.NeedPayTime"
        class="x-col-center x-col inputs" disabled
        @click="start_cl" />
      <u-icon name="arrow-right" color="#979797"
        size="26">
      </u-icon>
      <u-picker mode="time"
        @confirm="start_timeComfirm"
        v-model="start" :params="params">
      </u-picker>
    </view>
    <view class="clist x-row">
      <view class="x-col-center cname">
        账单类型
      </view>
      <div @click="showClient=true"
        class="boxFlex">
        {{PayText}}<u-icon name="arrow-right"
          color="#999">
        </u-icon>
      </div>
      <u-picker mode="selector"
        v-model="showClient" :range="wheList"
        @confirm="bindClient">
      </u-picker>
    </view>

    <view class="h16">

    </view>
    <view class="infos whiteBg">
      <view class="clist x-row ">
        <view class="x-col-center cname"
          style="width: 300rpx;">
          账单说明
        </view>
      </view>
      <textarea v-model="form.fInfo" class="txt"
        placeholder="请在此输情况说明…"></textarea>

      <view class="clist x-row">
        <view class="x-col-center cname">
          账单图片
        </view>
      </view>
      <u-upload ref="uUpload" :header="header"
        max-count="8" name="file" :action="action"
        :auto-upload="true">
      </u-upload>
    </view>
    <view :style="{height:height}"></view>
    <view class="viewbbutton"
      :style="{height:height}">
      <button class="sendBomBtn" @click="submit">提
        交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        MrkId: this.id,
        MrkName: '',
        Money: '',
        Pic: '',
        fInfo: '',
        NeedPayTime: '',
        WillType: 2,
        PayType: 1
      },
      clineOnce: true,
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: false
      },

      start: false, //开始时间
      PayText: '历史账单',
      id: 0,
      header: {
        token: uni.getStorageSync('token')
      },
      height: this.but_height(),
      action: this.urlimg + 'api/Upfile/PostImgFile',
      clist: [],
      isAllList: 1,
      page: 1,
      status: 'loading',
      wheList: ['历史账单', '退单'], //是否是老客户
      showClient: false,
      loading: true
    }
  },
  onLoad(e) {
    uni.setNavigationBarTitle({
      title: '新增账单'
    })
    this.id = Number(e.id)
  },
  methods: {
    // user/submit_apply 			新增报销
    submit() {
 

      this.form.MrkId = this.id
      this.form.Pic = this.$api.getreqImg(this.$refs.uUpload.lists)

      if (this.form.Money == '') {
        uni.showToast({
          title: '请输入账单金额',
          duration: 2000,
          icon: 'none'
        })
        return false
      }
      if (this.form.Pic == '') {
        uni.showToast({
          title: '请添加账单照片',
          duration: 2000,
          icon: 'none'
        })
        return false
      }
      if (this.form.NeedPayTime == '') {
        uni.showToast({
          title: '请选择账单时间',
          duration: 2000,
          icon: 'none'
        })
        return false
      }

     if (!this.clineOnce)
	 {
	   uni.showToast({
	     title: '信息提交中，请勿重复提交',
	     icon: 'none',
	     duration: 2000
	   })
	   return false
	 }
      this.clineOnce = false
	  
      this.$axios('api/MrkNoPayWill/AddDetail', 'post', { value: this.form }).then(res => {
        if (!res.Success) {
          uni.showToast({
            title: '提交失败：' + res.Message,
            icon: 'none',
            duration: 2000
          })
          this.clineOnce = true
          return false
        }
        this.clineOnce = true
        this.$api.handleToUrl('提交成功', '/pages/my_customer/PayWill?id=' + this.id)
      })
    },
    start_timeComfirm(e) {
      this.form.NeedPayTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
    },
    bindClient(event) {
      let isClient = Number(event.toString())
      this.form.PayType = isClient ? 2 : 1
      this.PayText = isClient ? '退单' : '历史账单'
    },
    start_cl() {
      this.start = true
    }
  }
}
</script>

<style lang="scss">
.clist {
  padding: 34rpx 32rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  .cname {
    width: 164rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #34404a;
  }

  .rmb {
    font-size: 30rpx;
    font-weight: 400;
    color: #34404a;
  }
}
.infos {
  padding: 0 32rpx;
  .clist {
    padding-left: 0;
    padding-right: 0;
  }
  .txt {
    height: 320rpx;
    background: #f8f9fc;
    border-radius: 16rpx;
    border: 2rpx solid rgba(0, 0, 0, 0.09);
    padding: 22rpx 20rpx;
    box-sizing: border-box;
    width: 100%;
  }
}
.h16 {
  height: 16rpx;
  background-color: #f5f7f9;
}
</style>
